import { Steps } from 'antd';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './index.less';
import _ from 'lodash';
import { connect } from 'react-redux';
import AddTaskForm from './components/add-task-form/index';
import Zoomeye from './img/Zoomeye.png';
import VulDetect from './img/VulDetect.png';
import { withRouter } from 'react-router';
const prefixCls = 'add-task';
const stepsList = [
  {
    title: '资产探测',
    typeName: 'Zoomeye',
    icon: Zoomeye,
    color: '#F0F7FC',
    content:
      '能够根据您录入的目标进行资产探活、操作系统识别、设备类型识别、端口探活、服务类型识别、服务组件识别、Web组件、网站标题识别、地理位置识别。您可使用该功能对办公区、服务器区、DMZ区等区域进行资产盘点，掌握接入网络的资产情况'
  },
  {
    title: '漏洞普查',
    typeName: 'VulDetect',
    icon: VulDetect,
    color: '#FFF8EB',
    content: '能够根据您录入的目标进行资产探测和漏洞扫描，发现目标范围内的存活资产以及漏洞情况。'
  }
  // {
  //   title: '弱口令检测',
  //   typeName: 'WeakPassword',
  //   content:
  //     '能够根据您录入的目标进行资产探测、弱口令检测，发现可以通过简单口令登录服务导致敏感信息泄露或获取服务器权限的攻击点'
  // }
];
const { Step } = Steps;
const AppTask = props => {
  const [current, setCurrent] = useState(0);
  const [stepTitle, setStepTitle] = useState('选择任务类型');
  const [stepsListCite, setStepsListCite] = useState(stepsList);
  const [sites, setSites] = useState();
  const [typeName, setTypeName] = useState();
  const [description, setDescription] = useState();
  const steps = [
    {
      title: stepTitle,
      content: 'First-content'
    },
    {
      title: '填写任务信息',
      content: 'Second-content'
    }
  ];
  const { modules = [], history } = props;
  const hasOneDayModule = modules.includes('1day');
  const changeSteps = (title, index) => {
    setStepTitle(title);
    setCurrent(index);
  };

  useEffect(() => {
    if (!hasOneDayModule) {
      setStepsListCite(stepsListCite.slice(0, 1));
    }
    const type = _.get(history, 'location.state.type', '');
    const currentSelectedSites = _.get(history, 'location.state.currentSelectedSites', []);
    const description = _.get(history, 'location.state.description', '');
    setDescription(description);
    if (currentSelectedSites && currentSelectedSites.length > 0) {
      setSites(currentSelectedSites);
    }
    if (type) {
      setTypeName(type);
      type === 'Zoomeye' ||
      ['notUpdateIn1Days', 'notUpdateIn7Days', 'notUpdateIn30Days'].includes(type)
        ? changeSteps('资产探测', 1)
        : changeSteps('漏洞普查', 1);
    }
  }, []);
  return (
    <div className={`${prefixCls}`}>
      <div className={`${prefixCls}-title`}>新建任务</div>
      <Steps current={current} className={`${prefixCls}-header`}>
        {steps.map((item, index) => (
          <Step
            key={item.title}
            title={item.title}
            icon={<span>{index + 1}</span>}
            onClick={() => {
              changeSteps('选择任务类型', 0);
            }}
          />
        ))}
      </Steps>
      {current === 0 ? (
        <div className={`${prefixCls}-step-content`}>
          <ul className={`${prefixCls}-step-content-ul`}>
            {stepsListCite.map(item => (
              <li
                style={{ background: item.color }}
                key={item.title}
                onClick={() => {
                  changeSteps(item.title, 1);
                  setTypeName(item.typeName);
                  setSites([]);
                }}
              >
                <img src={item.icon} />
                <div>
                  <p>{item.title}</p>
                  <div>{item.content}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      ) : (
        <AddTaskForm
          typeName={typeName}
          sites={sites}
          description={description}
          callback={() => {
            let state = { ...history.location.state };
            delete state.paramName;
            delete state.currentSelectedSites;
            history.replace({ ...history.location, state });
            changeSteps('选择任务类型', 0);
          }}
        />
      )}
    </div>
  );
};
const mapStateToProps = state => {
  return {
    modules: _.get(state, 'auth.cert.modules', [])
  };
};

AppTask.propTypes = {
  history: PropTypes.object,
  assetManageActions: PropTypes.object,
  modules: PropTypes.array
};

export default withRouter(connect(mapStateToProps)(AppTask));
